<template>
  <div class="content-block block---1">
    <div class="info-head">{{ title }}</div>
    <div class="info-content padding">
      <el-table
        v-loading="loading"
        :data="lists" height="300px"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop === 'col1'" #default="{ row }">
            <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row, 'industryCode')">{{row.col1}}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'

export default {
  name: 'grid-item-one',
  mixins: [Navigate2enterpriseAnalysis],
  props: {
    title: String
  },
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        { label: '行业', prop: 'col1' },
        { label: '综合能源消费量（吨标准煤）', prop: 'col2' },
        { label: '工业总产值（万元）', prop: 'col3' },
        { label: '用电量（千瓦时）', prop: 'col4' },
        { label: '能源消费总量（吨标准煤）', prop: 'col5' },
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    energyIndustry () {
      return this.$store.state.energyIndustry
    }
  },
  watch: {
    energyIndustry: {
      deep: true,
      handler () {
        this.getLists()
      }
    }
  },
  mounted () {
    this.$store.dispatch('GET_ENERGY_INDUSTRY').then(() => {
      this.getLists()
    })
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        this.loading = false
        resolve()
        this.lists = this.energyIndustry.map(v => ({
          id: v.code,
          col1: v.name,
          col2: '-',
          col3: '-',
          col4: '-',
          col5: '-'
        }))
      })
    }
  }
}
</script>
